<template>
	<view>
		<view class="flex-col page">
			<view class="flex-row items-center section_3">
				<u-search placeholder="请输入关键词搜索" v-model="name" :show-action="false"
					style="width: 560rpx;"></u-search>
				<view class="flex-col justify-start items-center shrink-0 text-wrapper ml-15" @click="httpRequest()">
					<text class="font_2">搜索</text>
				</view>
			</view>
			<view class="flex-row section_5">
				<view class="flex-row items-center" @click="setNumber()">
					<text class="font">接单数量</text>
					<image class="shrink-0 image_5"
						src="@/static/img/botom.png"  v-if="number=='asc'" />
						<image class="shrink-0 image_5"
							src="@/static/img/top.png"  v-if="number=='desc'" />
				</view>
				<view class="flex-row ml-62" @click="setJuli()">
					<text class="font">距离</text>
					<image class="shrink-0 image_5"
						src="@/static/img/top.png" v-if="juli=='desc'"  />
						<image class="shrink-0 image_5"
							src="@/static/img/botom.png" v-if="juli=='asc'"/>
				</view>
			</view>
			<view class="flex-row items-center section_6 view" v-for="(item,i) in jishiList">
				<image class="shrink-0 image_7" :src="item.avatar ? item.avatar:'/static/logo.png'" />
				<view class="flex-col flex-1 ml-9-5">
					<view class="flex-row items-center group_1">
						<view class="font_3 text_3" style="width: 90rpx;">{{item.name}}</view>
						<view class="flex-col justify-start items-center shrink-0 text-wrapper_2">
							<text class="font_4">{{item.age ?item.age :25 }}岁</text>
						</view>
						<view class="flex-col justify-start items-center shrink-0 text-wrapper_3">
							<text class="font_4">{{item.registeredResidence ?item.registeredResidence:'重庆人' }}</text>
						</view>
						<view class="flex-col justify-start items-center shrink-0 text-wrapper_3">
							<text class="font_4">{{item.professionalCertification ? item.professionalCertification:'保健师'}}</text>
						</view>
						<view class="flex-col justify-start items-center shrink-0 text-wrapper_4 view_5">
							<text class="font_4">今日可约</text>
						</view>
						<view class="flex-col justify-start items-center shrink-0 text-wrapper_5">
							<text class="font_5">{{time}}</text>
						</view>
					</view>
					<view class="flex-row group_3">
						<text class="font_6">{{item.score}}分</text>
						<view class="section_7 ml-7-5"></view>
						<text class="font_7 text_4 ml-7-5">已服务:{{item.num}}单</text>
						<view class="section_7 ml-7-5"></view>
						<text class="font_7 text_5 ml-7-5">距离:{{item.params.juLi}}km</text>
					</view>
					<view class="flex-row justify-between items-end relative view_7">
						<view class="flex-row items-center">
							<u-icon name="star-fill" @tap.stop="changeGuanchu(item,2)" color="#E24449" size="32"
								v-if="item.interest==1"></u-icon>
							<u-icon name="star" @tap.stop="changeGuanchu(item,1)" color="#999999" size="32"
								v-else></u-icon>
							<text class="font_8 text_6">关注:{{item.interestCount ? item.interestCount:0}}</text>
							<view class="" style="width: 50rpx;"></view>
							<u-icon name="heart" color="#999999" size="32" @tap="changeLike(item,1)"
								v-if="item.isLike!=1"></u-icon>
							<u-icon name="heart-fill" color="#E24449" @tap="changeLike(item,2)" size="32"
								v-if="item.isLike==1"></u-icon>
							<text class="font_8 text_7">点赞:{{item.fans ? item.fans:0}}</text>
						</view>
						<view class="flex-col justify-start items-center text-wrapper_6"  @tap="goDetail(item)"><text
								class="font_2">选择服务</text></view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		auth
	} from '@/common/authorize.js'; //权限判断
	import shop from "@/pages/jishiQing/jishiQing.vue"
	export default {
		data() {
			return {
				number:'asc',
				juli:'asc',
				sheShow: 0,
				// #ifdef MP-WEIXIN
				marginR: 180,
				weixin: true,
				// #endif
				// #ifdef H5
				weixin: false,
				// #endif

				status: {
					text: "nomore",
					show: false
				},
				jishiList: [],
				location: {
					lat: null,
					lng: null,
					address: '',
				}, //用户位置信息
				//select表示下拉选择框的各种属性，showOpa表示是否显示选择框，myOpa、myOpa1、myOpa1表示
				//当前该显示哪一个(全城、距离、时间)下拉列表，city、juLiIndex、times表示当前选修课选中的的是哪一个下标
				select: {
					showOpa: 0,
					myOpa: 0,
					myOpa1: 0,
					myOpa2: 0,
					myOpa3: 0,
					screenH: null,
					cityIndex: 0,
					juLiIndex: 0,
					times: ""
				},
				cityList: [{
					name: "全城",
					keyId: 'c0',
					id: 0
				}], //城市
				juLiList: [{
						juLi: "不限距离",
						value: 999,
						id: "j1"
					}, //id用于v-for的key
				],
				timeList: [],
				params: {},
				loadText: "nomore",
				time: '',
				sheShow: 0,
				pageNum: 1,
				name:''
			};
		},
		components: {
			shop
		},
		
		methods: {
			setNumber(e){
				if(this.number=='asc'){
					this.number = 'desc'
				}else{
					this.number = 'asc'
				}
				this.httpRequest()
			},
			setJuli(e){
				if(this.juli=='asc'){
					this.juli = 'desc'
				}else{
					this.juli = 'asc'
				}
				this.httpRequest()
			},
			changeGuanchu(e, i) {
				let that = this
				if (i == 1) {
					this.$request("worker/interest/add", {
						workerId: e.id
					}).then(res => {
						//console.log("like",res)
						if (res.msg == '操作成功') {
							uni.showToast({
								title: '关注成功',
								icon: 'none'
							})
							setTimeout(() => {
								that.httpRequest()
							}, 1000)
						}
					});
				} else {
					this.$request("worker/interest/delete", {
						workerId: e.id
					}).then(res => {
						//console.log("like",res)
						if (res.msg == '操作成功') {
							uni.showToast({
								title: '取消关注',
								icon: 'none'
							})
							setTimeout(() => {
								that.httpRequest()
							}, 1000)
						}
					});
				}

			},
			changeLike(e, i) {
				let that = this
				this.$request("kehu/other/likeWorker", {
					wid: e.id
				}).then(res => {
					//console.log("like",res)
					if (res.msg == '操作成功') {
						if (i == 1) {
							uni.showToast({
								title: '点赞成功',
								icon: 'none'
							})
						} else {
							uni.showToast({
								title: '取消点赞',
								icon: 'none'
							})
						}
						setTimeout(() => {
							that.httpRequest()
						}, 1000)
					}
				});
			},
			//获取一小时后的日期  时间
			accessTimeInAnHour() {
				var date = new Date();
				var date1 = new Date().getTime(); // 获取当前时间戳
				// 当前时间戳+3600s（一小时，其他时间通过计算时间戳进行相应加减），重新设置 Date 对象
				date.setTime(date1 + 3600000);
				return this.zeroPadd(date);
			},

			//日期时间补0
			zeroPadd(date) {
				var hours = date.getHours(); // 获取时
				var minutes = date.getMinutes(); // 获取分
				var seperator1 = "-"; // 自定义日期分隔符
				var year = date.getFullYear(); // 获取年
				var month = date.getMonth() + 1; // 获取月
				var strDate = date.getDate(); // 获取日

				if (month >= 1 && month <= 9) {
					month = "0" + month;
				}
				if (strDate >= 0 && strDate <= 9) {
					strDate = "0" + strDate;
				}
				if (hours >= 0 && hours <= 9) {
					hours = "0" + hours;
				}
				if (minutes >= 0 && minutes <= 9) {
					minutes = "0" + minutes;
				}

				var time = hours + ":" + minutes; // 时分
				var currentdate = year + seperator1 + month + seperator1 + strDate; // 年月日
				var date = time
				return date;
			},
			getCityList() {
				let that = this;
				this.$request("common/getCityList").then(res => {
					this.cityList = [{
						name: "全城",
						keyId: 'c0',
						id: 0
					}];
					this.cityList.push(...res.data);
					this.cityList.forEach((item, index) => {
						if (index > 0)
							item.keyId = 'c' + item.id
					})
					//console.log("getcity",that.cityList)
				})
			},
			httpRequest(params) {
				let cont = {
					num:this.number,
					juLi:this.juli,
				}
				this.$request("kehu/jishi/jiShiList", {
					pageNum: this.pageNum,
					pageSize: 10,
					sort:JSON.stringify(cont),
					name:this.name
				}).then(res => {
					if (this.pageNum > 1) {
						if (res.data.length > 0) {
							this.jishiList = this.jishiList.concat(res.data)
						} else {
							uni.showToast({
								title: '暂无数据',
								icon: 'none'
							})
							this.pageNum = this.pageNum - 1; //请求下一页
						}
					} else {
						this.jishiList = res.data
					}
				});
				this.status.show = true;
				uni.hideLoading();

			},
			goDetail(e) {
				let isLogin = this.$store.state.isLogin;
				if (isLogin == false) {
					this.loginUtil.goLogin(this);
				} else {
					if (e.status === 0) {
						uni.showToast({
							title: '该社工今天休息',
							icon: 'none'
						})
						return
					}
					uni.navigateTo({
						url: '../pagesB/jishi/jishi_info?id=' + e.id
					})
				}
			},
			async locationClick() { //选择服务地址
				// //console.log("选地址");//微信开发者工具点了可能没有反应
				let res = await auth.authLocation(); //判断是否开启定位
				if (res === false) {
					auth.noLocation();
				}
				if (res) {
					let that = this;
					uni.chooseLocation({
						success: (res) => {
							// //console.log("选择",res)
							this.location.address = res.name;
							this.location.lat = res.latitude;
							this.location.lng = res.longitude;
							that.$store.commit("setLat", res.latitude)
							that.$store.commit("setLng", res.longitude)
							that.$store.commit("setAddress", res.name);
							that.$store.commit("setCity", city); //存储起来
						}
					})
				}
			}
		},
		onLoad() {
			this.addTimeList(); //时间列表
			let rpx = this.$store.state.sysInfo.windowHeight / (uni.upx2px(100) / 100);
			this.select.screenH = rpx;
		},
		onShow() {
			this.pageNum = 1
			this.sheShow = uni.getStorageSync("sheShow");
			this.time = this.accessTimeInAnHour()
			this.jishiList = [];
			this.getCityList(); //城市列表
			this.httpRequest(this.params);
			this.location.address = uni.getStorageSync("address");
			this.location.lat = uni.getStorageSync("lat");
			this.location.lng = uni.getStorageSync("lng");

		},
		computed: {
			statusBarHeight() {
				return this.$store.state.sysInfo.statusBarHeight;
			},
		},
		onReachBottom() {
			this.pageNum++
			this.httpRequest()
		}
	};
</script>
<style scoped>
	.ml-8-5 {
		margin-left: 17rpx;
	}

	.ml-15 {
		margin-left: 30rpx;
	}

	.ml-9-5 {
		margin-left: 19rpx;
	}

	.ml-7-5 {
		margin-left: 15rpx;
	}

	.ml-9 {
		margin-left: 18rpx;
	}

	.page {
		padding-bottom: 50rpx;
		background-color: #f8fbff;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
	}

	.image-wrapper {
		background-color: #ffffff;
		height: 88rpx;
	}

	.section_3 {
		padding: 10rpx 30rpx;
		background-color: #ffffff;
	}

	.section_4 {
		padding: 17rpx 28rpx;
		background-color: #f8f8f8;
		border-radius: 16rpx;
		height: 68rpx;
	}

	.image_4 {
		width: 34rpx;
		height: 34rpx;
	}

	.font {
		font-size: 28rpx;
		font-family: PingFangSC;
		line-height: 26rpx;
		color: #333333;
	}

	.text_2 {
		color: #999999;
	}

	.text-wrapper {
		padding: 20rpx 0 21rpx;
		background-color: #1295ff;
		border-radius: 16rpx;
		width: 100rpx;
		height: 64rpx;
	}

	.font_2 {
		font-size: 24rpx;
		font-family: PingFangSC;
		line-height: 23rpx;
		font-weight: 500;
		color: #ffffff;
	}

	.section_5 {
		padding: 29rpx 41rpx 33rpx;
		background-color: #ffffff;
	}

	.image_6 {
		width: 14rpx;
		height: 11rpx;
	}

	.image_5 {
		width: 14rpx;
		height: 24rpx;
	}

	.section_6 {
		margin: 24rpx 30rpx 0;
		padding: 20rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
	}

	.view {
		margin: 20rpx 30rpx 0;
	}

	.image_7 {
		border-radius: 66rpx;
		width: 132rpx;
		height: 132rpx;
	}

	.group_1 {
		padding-left: 2rpx;
	}

	.font_3 {
		font-size: 28rpx;
		font-family: PingFangSC;
		line-height: 26rpx;
		font-weight: 500;
		color: #333333;
	}

	.text_3 {
		line-height: 25rpx;
	}

	.text-wrapper_2 {
		margin-left: 11rpx;
		padding: 7rpx 0 8rpx;
		background-color: #ebf6ff;
		border-radius: 4rpx;
		width: 54rpx;
		height: 32rpx;
	}

	.font_4 {
		font-size: 18rpx;
		font-family: PingFangSC;
		line-height: 17rpx;
		color: #1295ff;
	}

	.text-wrapper_3 {
		margin-left: 8rpx;
		padding: 7rpx 0 8rpx;
		background-color: #ebf6ff;
		border-radius: 4rpx;
		width: 74rpx;
		height: 32rpx;
	}

	.text-wrapper_4 {
		padding: 7rpx 0 8rpx;
		background-image: url('https://baijixing.oss-cn-chengdu.aliyuncs.com/2025/JUNE/3/1748943193732_9d484011-cd8b-454b-93fa-f63f7b57638f.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 92rpx;
		height: 32rpx;
	}

	.view_5 {
		margin-left: 50rpx;
	}

	.text-wrapper_5 {
		padding: 8rpx 0 9rpx;
		background-image: url('https://baijixing.oss-cn-chengdu.aliyuncs.com/2025/JUNE/3/1748943217292_de58a4f5-6715-4f7b-a875-b00a210e5e81.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 68rpx;
		height: 32rpx;
	}

	.font_5 {
		font-size: 18rpx;
		font-family: PingFangSC;
		line-height: 15rpx;
		color: #ffffff;
	}

	.group_3 {
		margin-top: 24rpx;
		padding: 0 3rpx;
	}

	.font_6 {
		font-size: 22rpx;
		font-family: PingFangSC;
		line-height: 20rpx;
		font-weight: 500;
		color: #ffd100;
	}

	.section_7 {
		background-color: #dddddd;
		width: 1rpx;
		height: 20rpx;
	}

	.font_7 {
		font-size: 20rpx;
		font-family: PingFangSC;
		line-height: 20rpx;
		color: #666666;
	}

	.text_4 {
		line-height: 19rpx;
	}

	.text_5 {
		line-height: 19rpx;
	}

	.view_7 {
		margin-top: -7rpx;
	}

	.image_8 {
		width: 26rpx;
		height: 26rpx;
	}

	.font_8 {
		font-size: 22rpx;
		font-family: PingFangSC;
		line-height: 20rpx;
		color: #999999;
	}

	.text_6 {
		margin-left: 8rpx;
	}

	.image_9 {
		margin-left: 14rpx;
		width: 41rpx;
		height: 22rpx;
	}

	.text_7 {
		margin-left: 9rpx;
		line-height: 21rpx;
	}

	.text-wrapper_6 {
		padding: 17rpx 0 18rpx;
		background-image: url('https://ide.code.fun/api/image?token=683e4ee3797f850011045914&name=6553f912c4397578567c17a50c846085.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 140rpx;
		height: 58rpx;
	}

	.text_8 {
		line-height: 27rpx;
	}

	.view_8 {
		margin-left: 15rpx;
	}

	.view_9 {
		margin-left: 45rpx;
	}

	.view_10 {
		margin-top: 24rpx;
		padding: 0 4rpx;
	}

	.view_12 {
		margin-left: 22rpx;
	}

	.view_14 {
		margin-left: 22rpx;
	}
</style>